<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态导入</title>
  </head>
  <body>
    <ul id="logBox"></ul>
    <script src="./log.js"></script>
    <script typ="module">
      import("./module.js")
        .then((module) => {
          console.log(module);
          log(module.default());
          log(module.functionValue());
        })
        .catch((err) => {
          // 处理加载失败
          console.log("加载失败", err);
        });

      async function loadModule(jsPath) {
        try {
          const module = await import(jsPath);
          console.log(module);
          log(module.default());
          log(module.functionValue());
        } catch (err) {
          // 处理加载失败
          console.log("加载失败", err);
        }
      }

      const bool = true;
      if (bool) {
        loadModule("./module.js");
      }

      log("异步加载：不阻塞主线程，适合代码分割和按需加载");
      log("返回 Promise：可以使用 .then() 或 async/await 处理");
      log(
        "表达式：import() 的参数可以是变量或表达式，而静态 import 必须是字符串字面量"
      );
    </script>
  </body>
</html>
